<script setup lang="ts">
import freightManageFn from '@/hooks/fun/freightManage'
import { ref } from 'vue';
let dia = ref<Element | undefined>()
const { typeBtn, close, dialogTableVisible, show, dialogVue, tableHeaderColor, listArr, formatterTemplateType, formatterTransportType, formatterAssociatedCityList } = freightManageFn()
</script>

<template>
  <el-card shadow="never" body-style="never" style="border: none;">
    <!-- 头部 新增模板 -->
    <el-col>
      <el-row>
        <el-button size="large" color="#e15536" @click="show('add')">新增模板</el-button>
      </el-row>
    </el-col>
    <!-- 表格 -->
    <el-table stripe :header-cell-style="tableHeaderColor" :data="listArr">
      <el-table-column label="模板类型" align="center" prop="templateType"
        :formatter="formatterTemplateType"></el-table-column>
      <el-table-column label="运送类型" align="center" prop="transportType"
        :formatter="formatterTransportType"></el-table-column>
      <el-table-column label="关联城市" align="center" prop="associatedCityList"
        :formatter="formatterAssociatedCityList"></el-table-column>
      <el-table-column label="首重" align="center" prop="firstWeight"></el-table-column>
      <el-table-column label="续重" align="center" prop="continuousWeight"></el-table-column>
      <el-table-column label="轻抛系数" align="center" prop="lightThrowingCoefficient"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <div style="display: flex;align-items: center;justify-content: center;">
          <el-link type="primary" @click="show('edit')">编辑</el-link>
          <span style="display: inline-block;margin-top: -2px;margin: 0 5px;color: #dcdfe6;">|</span>
          <el-link type="danger">删除</el-link>
        </div>
      </el-table-column>
    </el-table>
  </el-card>
  <dialogVue @close="close" ref="dia" :dialogTableVisible="dialogTableVisible" :typeBtn='typeBtn'></dialogVue>
</template>

<style scoped lang="scss">
.el-table {
  margin-top: 20px;
}
</style>